<template>
  <div class="CommentDetails" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="评论详情"></myHead>
    <div class="details-wrap">
      <div class="details-top">
        <div class="comment-box">
          <div class="comment-box-top">
            <div class="comment-box-img">
              <img src="../../../static/img/uhead.jpg" alt="">
              <div class="comment-box-name">
                <span>代码搬运工</span>
                <div class="star">
                  <van-rate allow-half v-model="9.5/2" readonly color="#FFAE00" />
                </div>
              </div>
            </div>
            <div class="comment-box-time">
              <p>04-30 14:43</p>
              <p>口味5星/包装5星/配送满意</p>
            </div>
          </div>
          <div class="comment-box-info">
            这个蛋糕真的超级好吃，香甜细腻，这个味的真的不要太好
            吃！！一定要试试！！
          </div>
          <div class="comment-img">
            <img v-for="(x,y) in imgList" :src="x" alt="" @click="lookImg(y)">
          </div>
        </div>
      </div>
      <div class="details-bot">
          <div class="comment-list">
              <p>评论</p>
          </div>
          <div class="details-bot-box">
              <div class="details-bot-box-top">
                  <div>
                    <img src="../../../static/img/uhead.jpg" alt="">
                    <div class="pl-name">
                      <p>某公司苦逼程序员</p>
                      <p>13:10  05/02/2017</p>
                    </div>
                  </div>
                  <div class="pl-num" @click="isFabulous=!isFabulous"><img :src="isFabulous?'../../../static/img/tz1ed.png':'../../../static/img/tz1.png'" alt=""><p>700</p></div>
              </div>
              <div class="details-bot-box-bot">
                我是个俗气至顶的人，见山是山，见海是海，见花便是花。唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。
              </div>
          </div>
          <div class="details-bot-box">
              <div class="details-bot-box-top">
                  <div>
                    <img src="../../../static/img/uhead.jpg" alt="">
                    <div class="pl-name">
                      <p>某公司苦逼程序员</p>
                      <p>13:10  05/02/2017</p>
                    </div>
                  </div>
                  <div class="pl-num" @click="isFabulous=!isFabulous"><img :src="isFabulous?'../../../static/img/tz1ed.png':'../../../static/img/tz1.png'" alt=""><p>700</p></div>
              </div>
              <div class="details-bot-box-bot">
                我是个俗气至顶的人，见山是山，见海是海，见花便是花。唯独见了你，云海开始翻涌，江潮开始澎湃，昆虫的小触须挠着全世界的痒。
              </div>
          </div>
      </div>
    </div>
    <div class="inp">
      <input type="text" placeholder="你想说的话...">
      <p class="btn">发表</p>
    </div>

    <van-image-preview v-model="show" :images="imgList" :show-indicators="true" :start-position="index" :show-index="false"></van-image-preview>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "CommentDetails",
    components:{
      myHead
    },
    data(){
      return {
        isFabulous:false,
        minHeight:0,
        imgList:['../../../static/img/es1.png','../../../static/img/es2.png','../../../static/img/es3.png'],
        index:0,
        show:false
      }
    },
    methods:{
      jump(page) {

      },
      lookImg(index){
        this.show = true;
        this.index = index;
      },
    }
  }
</script>

<style scoped>
  .CommentDetails {
    background-color: #F5F5F5;
    padding-top: .5rem;
    box-sizing: border-box;
  }
  .details-wrap {
    padding: .1rem;
  }
  .comment-box {
    margin-bottom: .1rem;
  }
  .comment-box-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-img {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-img>img {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    margin-right: .05rem;
  }
  .comment-box-name {
    height: .35rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-name>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #4E4E4E;
  }
  .comment-box-name>.star {
    margin: 0;
  }
  .comment-box-time {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .comment-box-time>p {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-info {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(98,98,98,1);
    line-height:.2rem;
    margin: .15rem 0;
    padding-left: .4rem;
  }
  .comment-img {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding-left: .4rem;
  }
  .comment-img>img {
    width: .95rem;
    height: .95rem;
    margin-right: .1rem;
    margin-bottom: .1rem;
  }
  .comment-box-icon {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .comment-box-icon>p:nth-child(1) {
    text-align: right;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #B5B5B5;
  }
  .comment-box-icon>div>p {
    padding: 0 .1rem;
    height:.22rem;
    background:rgba(255,255,255,1);
    border:.01rem solid rgba(204, 204, 204, 1);
    border-radius:.11rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-left: .1rem;
  }
  .comment-box-icon>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .comment-box-icon>div>p>span {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #808080;
  }
  .comment-box-icon>div>p>img {
    width: .13rem;
    height: .13rem;
    margin-right: .05rem;
  }

  .comment-list {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    border-bottom: .01rem solid #EFEFEF;
    margin-bottom: .15rem;
  }
  .comment-list>p {
    height: .21rem;
    line-height: .2rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    text-align: center;
    border-bottom: .02rem solid #FF8C3D;
  }

  .details-bot-box {
    margin-bottom: .2rem;
  }
  .details-bot-box-top {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .05rem;
  }
  .details-bot-box-top>div:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .details-bot-box-top>div:nth-child(1)>img {
    width: .4rem;
    max-height: .4rem;
    border-radius: 50%;
    margin-right: .1rem;
  }
  .details-bot-box-top>div:nth-child(2) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .details-bot-box-top>div:nth-child(2)>img {
    width: .16rem;
    height: .17rem;
  }
  .pl-name {
    height: .4rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .pl-name>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .pl-name>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .pl-num>p {
    width: .35rem;
    text-align: left;
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #595959;
    margin-left: .05rem;
  }
  .details-bot-box-bot {
    padding-left: .5rem;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:.21rem;
  }
  .inp {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .1rem;
    position: fixed;
    left: 0;
    bottom: .2rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    background-color: #F5F5F5;
  }
  .inp>input {
    width:2.8rem;
    height:.33rem;
    background:rgba(255,255,255,1);
    border-radius:.17rem;
    padding-left: .1rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    border: none;
  }
  .inp>input::placeholder {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .inp>P {
    width:.6rem;
    height:.33rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,142,65,1) 53%,rgba(255,110,0,1) 100%);
    border-radius:.17rem;
    text-align: center;
    line-height: .33rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
  }

  /* 评分适配 */
  >>> .van-rate__icon {
    font-size: .1rem;
  }
  >>> .van-rate__item:not(:last-child) {
    padding-right: .04rem;
  }

  /* 预览图下标显示 */
  /deep/ .van-image-preview__index {
    top: .1rem;
    color: #fff;
    font-size: .14rem;
    text-shadow: 0 .01rem .01rem #323233;
  }
  >>> .van-swipe__indicators {
    bottom: .2rem;
  }
  >>> .van-swipe__indicator {
    width: .06rem;
    height: .06rem;
  }
  >>> .van-swipe__indicator:not(:last-child) {
    margin-right: .06rem;
  }
</style>
